import React from "react";
import {TabBar} from 'antd-mobile';
import './index.css'
import {Route} from 'react-router-dom'

import Index from '../Index'
import HouseList from '../HouseList'
import News from '../News'
import Profile from '../Profile'

const tabItems = [{
    title: '首页',
    icon: 'icon-ind',
    path: '/home'
},
    {
        title: '找房',
        icon: 'icon-findHouse',
        path: '/home/list'
    },
    {
        title: '资讯',
        icon: 'icon-infom',
        path: '/home/news'
    },
    {
        title: '我的',
        icon: 'icon-my',
        path: '/home/profile'
    }]

export default class Home extends React.Component {

    state = {
        // 选中的菜单项,记录当前的pathname来匹配对应的tab
        selectedTab: this.props.location.pathname
    };

    // 当Home组件的内容发生更新的时候调用
    componentDidUpdate(prevProps) {
        // 在这里就能判断路由是否进行了切换，路由的信息保存在props属性里面
        // 如果当前的路由信息不等于上一次的，那么就代表发生了路由切换
        if (prevProps.location.pathname !== this.props.location.pathname) {
            this.setState({
                selectedTab: this.props.location.pathname
            })
        }
    }

    renderTabBarItem() {
        return tabItems.map(item => {
            return (
                <TabBar.Item
                    title={item.title}
                    key={item.title}
                    icon={
                        <i className={`iconfont ${item.icon}`}></i>
                    }
                    selectedIcon={<i className={`iconfont ${item.icon}`}></i>
                    }
                    selected={this.state.selectedTab === item.path}
                    onPress={() => {
                        this.setState({
                            selectedTab: item.path,
                        });
                        this.props.history.push(item.path)
                    }}
                >
                </TabBar.Item>

            )
        })
    }


    render() {
        return (<div className='home'>
            {/* 配置路由信息 */}
            <Route path="/home/news" component={News} />
            <Route exact path="/home" component={Index} />
            <Route path="/home/list" component={HouseList} />
            <Route path="/home/profile" component={Profile} />
            {/* 底部导航栏 */}
            <TabBar
                tintColor="#21b97a"
                barTintColor="white"
                noRenderContent="true"
            >
                {this.renderTabBarItem()}
            </TabBar>
        </div>)
    }

}
